<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/goodsDetails.css">
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		document.title = "{$product.product_name}";

		var app = new Vue({
			el: '#container',
			data: {
				memberList: [],
			},
			methods: {
				index: indexPage,
				order: orderPage,
				rank: rankPage,
				center: centerPage,
				goHome:function(){
					window.location.href = '/wechat/Index/index';
				},
				jump: function(url) {
					window.location.href = url;
				},
				pay: function() {

					var number = $("input[name=number]").val();

					var leftNumber = parseInt("{$round.left_number}");

					if(number > leftNumber || number < 0) {
						alert("对不起，剩余份数不足");
						$("input[name=number]").val(1);
						return false;
					}

					$.ajax({
						url:"/wechat/order/preparePayForJoin",
						type:"post",
						data:{
							groupId: "{$group.group_id}",
							number: number
						},
						dataType:"JSON",
						beforeSend:function(){
							$("#loadingToast").show();
						},
						complete:function(){
							$('#loadingToast').hide();
						},
						success:function(data){
							if(data.code != 200) {
								alert(data.msg);
								window.location.reload();
							} else {
								//alert("下单成功，等公众号下来就可以支付啦，哈哈");
								window.location.href = "/wechat/product/pay/id/" + data.order_id;
							}
						},
					})

				}
			}
		})

		// var header_word = document.getElementById('header-word');
		// var goods_details = document.getElementById('goods-details');
		// goods_details.style.paddingTop = ((header_word.offsetHeight)-50) + 'px';
		var btn = document.getElementById('do-header-btn');
		var body = document.getElementById('goods-details');
		var other_frame = document.getElementById('other-header-frame');
		var no_attention_frame = document.getElementById('no-attention-frame');
		var invite_other = document.getElementById('invite-other');
		var other_bottom_zone = document.getElementById('other-bottom-zone');
		var body_bg = document.getElementById('body-bg');
		var share = document.getElementById('share');
		var num = 1;
		btn.onclick = function() {
		    if('{$subscribe}' == 1) {
                other_frame.className = "other-header-frame active";
			} else {
                no_attention_frame.style.display = "block";
			}

			other_bottom_zone.style.display = 'none';
			body_bg.style.display = 'block';
		}
		body_bg.onclick = function() {
			other_frame.className = "other-header-frame";
            no_attention_frame.style.display = "none";
			other_bottom_zone.style.display = 'flex';
			body_bg.style.display = 'none';
			$('.the-rule-frame').hide();
			$('.no-attention-frame').hide();
			$('.rule-close').hide();
			$('#goods-details').css("position","relative");
		}
		invite_other.onclick = function() {
		    if('{$subscribe}' == 1) {
                document.getElementsByTagName('body')[0].scrollTop = 0;
                share.style.display = 'block';
			} else {
                no_attention_frame.style.display = "block";
			}
			other_bottom_zone.style.display = 'none';
			body_bg.style.display = 'block';
		}
		share.onclick = function() {
			share.style.display = 'none';
			body_bg.style.display = 'none';
			other_bottom_zone.style.display = 'flex';
		}
		$('.icon-close').on('click', function(){
			other_frame.className = "other-header-frame";
			other_bottom_zone.style.display = 'flex';
			body_bg.style.display = 'none';
		})

		$('.the-rule-btn').on('click', function() {
			$('.body-bg').show();
			$('.the-rule-frame').show();
			$('.rule-close').show(300);
			$('#goods-details').css("position","fixed");
		})

		$('.rule-close').on('click', function(){
			$('.body-bg').hide();
			$('.the-rule-frame').hide();
			$('.rule-close').hide();
			$('#goods-details').css("position","relative");
		})

		$('.different-money div').on('click', function() {
			if (parseInt($(this).children('p').text()) > parseInt($('.the-goods-num').text())) {
				alert("对不起，剩余份数不足");
				$(this).removeClass('active');
			}else{
				$(this).toggleClass('active').siblings('div').removeClass('active');
				$('.pay-amount').html($(this).children('p').text()+'元');
				num = parseInt($(this).children('p').text());
				$('input[name=number]').val(num);
				if ($(this).hasClass('active')) {
					$('.other-add').hide();
					$('input[name=number]').hide();
					$('.other-minus').hide();
					$('.need-to-pay').addClass('active');
				}else{
					$('.need-to-pay').removeClass('active');
					$('.other-add').show();
					$('input[name=number]').show();
					$('.other-minus').show();
				}
			}
		})
		// body_bg.onclick = function() {
		// 	body_bg.style.display = 'none';
		// 	share.style.display = 'none';
		// }

		var demo = document.getElementById("demo");
		var demo1 = document.getElementById("demo1");
		var demo2 = document.getElementById("demo2");
		$('#demo1 ul li').each(function(){
			$(this).css('min-width',screen.width);
		})
		demo2.innerHTML=document.getElementById("demo1").innerHTML;
		function Marquee(){
			if(demo.scrollLeft-demo2.offsetWidth>=0){
				demo.scrollLeft-=demo1.offsetWidth;
			}
			else{
				demo.scrollLeft++;
			}
		}
		var myvar=setInterval(Marquee,30);

		$('.other-add').on('click', function() {
			$('.other-minus').addClass('active');
			if(num == parseInt($('.the-goods-num').text())-1){
				$('.other-add').removeClass('active');
				$('input[name=number]').val(num+1);
				num++;
				$(".pay-amount").html(num+"元");
				return false;
			}else if(num < parseInt($('.the-goods-num').text())-1){
				num++;
				$('input[name=number]').val(num);
				$(".pay-amount").html(num+"元");
			}
		})
		$('.other-minus').on('click', function() {
			$('.other-add').addClass('active');
			if (num == 1) {
				$('input[name=number]').val(1);
				return false;
			}else if(num > 1){
				num--;
				$('input[name=number]').val(num);
			}
			$(".pay-amount").html(num+"元");
		})

		$('input[name="number"]').focus(function() {
			$(this).val("");
		});

		$('input[name="number"]').blur(function(){
			if ($(this).val() >= parseInt($('.the-goods-num').text())) {
				num = parseInt($('.the-goods-num').text());
				$('.other-add').removeClass('active');
				$(this).val($('.the-goods-num').text());
			}else if($(this).val() == "" || $(this).val() < 0){
				$(this).val(1);
				$('.other-add').addClass('active');
				num = 1;
			}else if(0 < $(this).val() <= parseInt($('.the-goods-num').text())){
				num = $(this).val();
				$('.other-add').addClass('active');
			}
		})

		$('input[name=number]').change(function() {
			num = parseInt($('input[name=number]').val());
			if (num > parseInt($('.the-goods-num').text())) {
				$(".pay-amount").html(parseInt($('.the-goods-num').text()+"元"));
			}else if(num <= 0){
				$(".pay-amount").html("1元");
			}else if( 0 < num <= parseInt($('.the-goods-num').text())){
				$(".pay-amount").html(num+"元");
				$('.other-add').addClass('active');
			}
		});

		var pageNum = 2;
		var isNeedRefresh = false;

		$(".more-zone").bind("click", function() {

			$.ajax({
				url:"/wechat/product/groupMemberList",
				type:"post",
				data:{
					groupId: "{$group.group_id}",
					pageNum:pageNum++,
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					if(!isNullOrEmpty(data)) {

						if(pageNum == 2){
							app.memberList = data;
						}else{
							app.memberList = app.memberList.concat(data);
						}

						if(data.length < 8) {
							$(".more-zone").hide();
						}

					} else {
						$(".more-zone").hide();
					}
				},
			})

		})

		function bindCountDown() {
			var endtime = $(".deadline-time").attr("endtime");
			setInterval(function() {

				//var endTime = new Date(endtime.replace(/-/g,"/"));
				var ua = navigator.userAgent.toLowerCase();	
				if (/iphone|ipad|ipod/.test(ua)) {
					var endTime = safariDate(endtime);	
				} else if (/android/.test(ua)) {
					var endTime = new Date(endtime.replace(/-/g,","));		
				}
				var timeGap = getTimeGap(new Date(), endTime, "hours");
				if (timeGap["hours"] == undefined || timeGap["minutes"] == undefined || timeGap["seconds"] == undefined) {
					$(".deadline-time p span").html("00:00:00");
				}else{
					$(".deadline-time p span").html(
						timeGap["hours"]+":"+
						timeGap["minutes"]+":"+
						timeGap["seconds"]);
				}

			}, 1000);
		}

		function bindProgress() {

			var total = "{$product.price}";
			var join = "{$round.join_number}";

			var proportion = parseFloat(join/total);
			var progressImg = $(".progress-img").width();
			var progressImgRed = $(".progress-img-red").width(progressImg*proportion);
			$('.progress-img-red').css('width',progressImgRed);

		}

		bindCountDown();
		bindProgress();

		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: '{$appid}', // 必填，公众号的唯一标识
			timestamp: '{$signature.timestamp}', // 必填，生成签名的时间戳
			nonceStr: '{$signature.noncestr}', // 必填，生成签名的随机串
			signature: '{$signature.signature}', // 必填，签名，见附录1
			jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});

		wx.ready(function(){

			var shareData = {
				imgUrl    :    '{$product.image}',
				link     :     '{$shareUrl}',
				title     :    '{$product.product_name}',
				desc     :     '{$product.brief}'
			};

			wx.onMenuShareAppMessage(shareData);
			wx.onMenuShareTimeline(shareData);
		});

		var isOnline = "{$product.is_online}";

		if(isOnline == "-1") {
			alert("对不起，该商品已下架，请选择其他商品进行拼团");
			window.location.href = "/wechat";
		}

	});


</script>
<!-- <div class="header-command">
	<div class="icon-header-command"></div>
	<p id="header-word">{$group.note}</p>
</div> -->
<div class="goods-details" id="goods-details">
	<div class="goods-bg" style="background: url('{$product.image}')no-repeat center;background-size: 100% 15rem;">
		<div class="deadline-time" endtime="{$product.end_time}">
			<p>倒计时：<span>00:00:00</span></p>
			<div>还差{$round.left_number}元</div>
		</div>
	</div>
	<div class="goods-information">
		<h3>{$product.product_name}</h3>
		<p class="content color-66">{$product.brief}</p>
		<span class="progress color-99">进度</span>
		<div class="progress-img"></div>
		<div class="progress-img-red"></div>
		<div class="the-goods-red"><div class="all">总需{$product.price}</div><div class="need">本轮还需{$round.left_number}</div></div>
		<!-- <div class="total-price">总价 <span>￥{$product.price}</span></div>
		<span class="progress color-99">进度</span>
		<div class="progress-img"></div>
		<div class="progress-img-red"></div>
		<div class="goods-price color-font">￥{$product.price}</div>
		<div class="remain-price color-99">(剩余<span class="color-font">{$round.left_number}</span>份)</div>
		<div class="now-price color-pink">￥{$round.join_number}</div> -->
	</div>
	<!-- <div class="goods-content">
		<h3>{$product.product_name}</h3>
		<p class="content color-66">{$product.brief}</p>
	</div>
	<div id="moocBox" class="scroll-nav bg-eee">
		<ul>
			<foreach name="announcementList" item="vo">
				<li>
					<a href="javascript:void(0)">{$vo.content}</a>
				</li>
			</foreach>
		</ul>
	</div> -->
	<div id="demo" class="qimo8">
		<div class="qimo">
		    <div id="demo1">
		        <ul>
					<foreach name="announcementList" item="vo">
						<li>
							<a href="javascript:void(0)">{$vo.content}</a>
						</li>
					</foreach>
				</ul>
		    </div>
		    <div id="demo2"></div>
	    </div>
	</div>
	<div class="user-zone">
		<div class="header-zone">
			<!-- <div class="header-img-border"></div> -->
			<div class="header-img-tag">团长</div>
			<div class="user-img" style="background: url('{$groupCustomer.headimgurl}')no-repeat center;background-size: cover;"></div>
			<p class="name color-font">{$groupCustomer.nickname}</p>
			<p class="have-num color-99">持有<span class="color-font">{$groupCustomer.number}</span></p>
		</div>
		<foreach name="memberList" key="index" item="vo">
			<if condition="$vo['customer_id'] neq $groupCustomer['customer_id']">
				<if condition="$index lt 8">
					<div class="other-user-zone">
						<div class="user-img" style="background: url('{$vo.headimgurl}')no-repeat center;background-size: cover;"></div>
						<p class="name color-font">{$vo.nickname}</p>
						<p class="have-num color-99">持有<span class="color-font">{$vo.number}</span></p>
					</div>
				<else/>
					<div class="other-user-zone hide">
						<div class="user-img" style="background: url('{$vo.headimgurl}')no-repeat center;background-size: cover;"></div>
						<p class="name color-font">{$vo.nickname}</p>
						<p class="have-num color-99">持有<span class="color-font">{$vo.number}</span></p>
					</div>
				</if>
			</if>
		</foreach>

		<div class="other-user-zone" v-for="member in memberList" v-if="member.customer_id != {$groupCustomer['customer_id']}">
			<div class="user-img" style="background: url('{{member.headimgurl}}')no-repeat center;background-size: cover;"></div>
			<p class="name color-font">{{member.nickname}}</p>
			<p class="have-num color-99">持有<span class="color-font">{{member.number}}</span></p>
		</div>

		<if condition="count($memberList) eq 7">
			<div class="more-zone">
				<p class="color-99"></p>
				<div class="icon-more"></div>
			</div>
		</if>
		
	</div>
	<div class="goods-description">
		<p class="title active">商品详情</p>
		<div class="the-rule-btn">
			<p class="color-66">规则说明</p>
		</div>
		<div class="description">
			{$product.description}
		</div>
	</div>
</div>
<div class="other-bottom-zone" id="other-bottom-zone">
	<div class="the-home" v-on:click="goHome">
		<p>首页</p>
	</div><div class="invite-other" id="invite-other">
		<p>邀请团员</p>
	</div><div class="go-on-pay" id="do-header-btn">
		<p>立即跟团</p>
	</div>
</div>  
<div class="other-header-frame" id="other-header-frame">
	<p class="choose-pay-title">选择购买奖券数量</p>
	<div class="icon-close"></div>
	<p class="the-pay-info">获胜攻略:邀请团员加入，团中一人中奖则全团中奖！中奖后全团有份，人人都拿奖！</p>
	<div class="choose-pay-info">
		<div class="choose-pay-goods-img" style="background:url('{$product.image}')no-repeat center;background-size: cover;"></div>
		<div class="choose-pay-goods">
			<p class="choose-pay-goods-title">{$product.product_name}</p>
			<p class="the-rule" v-on:click="jump('http://mp.weixin.qq.com/s/gxqBZz4Zo9rngsFtyJmY9Q')">我已阅读并同意去开团<span>《用户协议》</span></p>
			<p class="the-times">第{$product.current_round}轮</p>
		</div>
	</div>
	<div class="other-count">
		<i class="other-minus active"></i>
		<input type="number" value="1" name="number">
		<i class="other-add active"></i>
		<div class="need-to-pay">需要支付<span class="pay-amount">1元</span></div>
		<div class="other-remain-num color-99">剩余 <span class="the-goods-num color-font">{$round.left_number}</span>份</div>
	</div>
	<div class="different-money">
		<div class="five-btn">
			<p>10</p>
		</div>
		<div class="ten-btn">
			<p>50</p>
		</div>
		<div class="twenty-btn">
			<p>100</p>
		</div>
	</div>
	<div class="pay-btn" v-on:click="pay">
		<p>确认支付</p>
	</div>
</div> 
<div class="body-bg" id="body-bg"></div>
<div class="share" id="share"></div>
<div class="rule-close"></div>
<div class="the-rule-frame" style="overflow-y:auto;">
	<h3>开团规则</h3>
	<p>1.挑选喜欢的商品：商品按照总价值分配对应数量的幸运号码，使用对应数量的团金币，可以获得其中1个或多个幸运号码（系统随机分配）</p>
	<p>2.开团/参团：可选择作为团长组建新团（获胜将获得荣誉值并计入排行榜），或参加已有的团；</p>
	<p>3.邀请团员：各个团各自邀请团员加入，当所有幸运号码分配完毕后，系统自动开始计算开奖号码（如人数不足将自动全额退还团金币）；</p>
	<p>4.奖品揭晓：系统根据规则计算出一个幸运号码，持有该号码的团员所在的团为中奖团；</p>
	<p>5.奖品分配：奖品由中奖团全体团员瓜分，由持有中奖幸运号码的团员在如下奖品分配方式中二选一：</p>
	<p>方式一：将奖品返回给去开团平台（按照初始团金币价值的95折结算）换取团金币，系统将把换得的团金币，按照中奖团成员各自支付的团金币数量比例分配；</p>
	<p>方式二：中奖人选择保留奖品，则先按照规则一计算其他中奖团友应获得的团金币份额，然后由中奖人支付该部分团金币分配给团友，然后单独获得奖品。</p>
	<p class="lucky-code">幸运号码计算规则</p>
	<p>1.商品的最后一个号码分配完毕后，将公示截止该时间点本站全部商品的最后5个参与时间；</p>
	<p>2.将这5个时间的数值进行求和（得出数值A）（每个时间按时、分、秒、毫秒的顺序组合，如20:15:25.362则为201525362）；</p>
	<p>3.数值A除以该商品总需人次得到的余数 + 原始数 10000001，得到最终幸运号码，拥有该幸运号码者所在的团为中奖团。</p>
</div>
<div class="no-attention-frame" id="no-attention-frame">
	<h3>温馨提示</h3>
	<p class="attention-info">为了接受中奖以及发货通知<br/>请先关注去开团</p>
	<img src="http://114.215.113.76/qrcode_for_gh_f91b4c66123a_430.jpg">
	<p class="code-info"><span>长按识别</span>二维码来关注</p>
</div>

<!-- loading toast -->
<div id="loadingToast" class="weui_loading_toast" style="display: none;">
	<div class="weui_mask_transparent"></div>
	<div class="weui_toast small">
		<div class="weui_loading">
			<div class="weui_loading_leaf weui_loading_leaf_0"></div>
			<div class="weui_loading_leaf weui_loading_leaf_1"></div>
			<div class="weui_loading_leaf weui_loading_leaf_2"></div>
			<div class="weui_loading_leaf weui_loading_leaf_3"></div>
			<div class="weui_loading_leaf weui_loading_leaf_4"></div>
			<div class="weui_loading_leaf weui_loading_leaf_5"></div>
			<div class="weui_loading_leaf weui_loading_leaf_6"></div>
			<div class="weui_loading_leaf weui_loading_leaf_7"></div>
			<div class="weui_loading_leaf weui_loading_leaf_8"></div>
			<div class="weui_loading_leaf weui_loading_leaf_9"></div>
			<div class="weui_loading_leaf weui_loading_leaf_10"></div>
			<div class="weui_loading_leaf weui_loading_leaf_11"></div>
		</div>
		<p class="weui_toast_content">正在处理</p>
	</div>
</div>
<!--end loading toast-->
<div id="toastNothing" style="display: none;">
	<div class="weui_mask_transparent"></div>
	<div class="weui_toast">
		<i class="weui_icon_toast"></i>
		<p class="weui_toast_content color-fff">已到最底部</p>
	</div>
</div>
